<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider ></el-divider>
    <el-row>
      <el-col span="12">
        <div class="Echarts">
          <div id="main" style="width: 600px;height: 400px;"></div>
        </div>
      </el-col>
      <el-col span="12">
        <div class="Echarts">
          <div id="main1" style="width: 650px;height:600px;"></div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
export default {
  data() {
    return {
      count: [],
      role: [],
      data:[],

    };
  },

  methods: {
    getDate(){
      let url = 'http://localhost:8080/roles/selectData';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        this.data=response.data.data;
        this.myEcharts1(this.data)
      })
    },
    getCount(){
      let url = 'http://localhost:8080/roles/selectCount';
      let url1 = 'http://localhost:8080/roles/selectRoleName';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        this.count=response.data.data;
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url1).then((response)=>{
          this.role=response.data.data;
          this.myEcharts(this.count,this.role)
        })
      })
    },
    myEcharts(count,role){
      let myChart = this.$echarts.init(document.getElementById('main'));
      //配置图表

      let option = {

        title: {
          text: '各个岗位员工数量',
        },
        tooltip: {},
        legend: {
          data: ['人数']
        },
        xAxis: {
          data:role
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: count
        }]
      };
      myChart.setOption(option);
    },
    myEcharts1(data){
      let myChart = this.$echarts.init(document.getElementById('main1'));
      //配置图表
      let option = {
        title: {
          text: '各个岗位员工占比',
        },
          legend: {
            top: 'bottom'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [50, 250],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: data
            }
          ]
        }
      myChart.setOption(option);
    }
  },
  mounted(){
    this.getCount();
    this.getDate();
    this.myEcharts1();
  }
}
</script>
